<template>
  <el-card style="line-height: 0px" class="box-card">
    <div slot="header" class="clearfix">
      <h1>缺勤记录管理</h1>
      <el-divider></el-divider>
      <el-form
        ref="absencesSearchForm"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item prop="sname">
          <el-input
            v-model.trim="searchForm.sname"
            clearable
            placeholder="姓名"
          ></el-input>
        </el-form-item>

        <el-form-item prop="dormId">
          <el-select
              v-model.number="searchForm.dormId"
              clearable
              placeholder="请选择宿舍楼"
          >
            <el-option v-for="item in $store.state.dorms" :key="item.id" :label="item.cname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="startTime">
          <el-date-picker
              v-model="searchForm.startTime"
              type="datetime"
              placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="endTime">
          <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="default" @click="onReset">重置</el-button>
            <el-button type="danger" @click="delBatch">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      height="500"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="编号" height="15"> </el-table-column>
      <el-table-column prop="code" label="学号" height="15"> </el-table-column>
      <el-table-column prop="sname" label="姓名" height="15">
      </el-table-column>
      <el-table-column prop="dormName" label="宿舍楼" height="15">
      </el-table-column>
      <el-table-column prop="roomId" label="寝室" height="15">
      </el-table-column>
      <el-table-column prop="createDate" label="日期" height="15">
      </el-table-column>
      <el-table-column prop="remark" label="备注" height="15">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleDel(scope.row)" type="danger" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.pageNum"
      :page-sizes="pager.options"
      :page-size="pager.pageSize"
      layout="total,  prev, pager, next, jumper,sizes"
      :total="pager.count"
    >
    </el-pagination>
  </el-card>
  <!--  <div>-->
  <!--    <el-table :data="tableData" height="500" border>-->
  <!--      <el-table-column width="30"> </el-table-column>-->
  <!--      <el-table-column prop="id" label="编号"  height="15" >-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="name" label="姓名"  height="15">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="gender" label="性别"  height="15">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="phone" label="电话"  height="15">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="address" label="宿舍楼"  height="15">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column prop="username" label="用户名" height="15">-->
  <!--      </el-table-column>-->
  <!--      <el-table-column label="操作" width="200">-->
  <!--        <el-button>编辑</el-button><el-button type="danger">删除</el-button>-->
  <!--      </el-table-column>-->
  <!--    </el-table>-->
  <!--  </div>-->
</template>

<script>
import absencesApi from "../http/absencesApi";

export default {
  name: 'DormAdminManager',
  created() {
    //当vue实例创建成功时
    this.getList();
  },

  data() {
    return {
      searchForm: {},
      tableData: [],
      batchIds: [],
      // adminNames:[],
      pager: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    toAdd(){
      this.$router.push("/absences/toAdd.html")
    },
    delBatch(){
      if (this.batchIds.length == 0){
        this.$message.warning("请勾选需要删除的数据！");
        return;
      }
      let result = confirm("确认要删除该记录吗？");
      if (result){
        absencesApi.delBatch(this.batchIds).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        });
      }
    },
    getList() {
      absencesApi.getListByPage(this.searchForm, {
          pageNum: this.pager.pageNum,
          pageSize: this.pager.pageSize
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.pager = res.data.data;
            this.tableData = this.pager.data;
          }
        });
    },
    onSubmit() {
      this.getList();
    },
    onReset() {
      this.$refs['absencesSearchForm'].resetFields();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.batchIds = [];
      val.forEach(item => this.batchIds.push(item.id));
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push(`/absences/toEdit/${row.id}.html`)
    },
    handleDel(row) {
      console.log(row);
      let result = confirm("确认要删除该记录吗？");
      if (result){
        absencesApi.del(row.id).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pager.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pager.pageNum = val;
      this.getList();
    }
  }
};
</script>

<style>
.el-table-column {
  text-align: center;
}
</style>
